<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="bannerocity.css" />
<script type="text/javascript">

	function validateNonEmpty(field,help){
		return validateRegEx(/.+/,field.value,help,"필수  입력 사항 입니다.");
	}
	
	function validateLength(field,minLength,maxLength,help){
		/* if(field.value.length < minLength || field.value.length > maxLength){
			if(help != null)
				help.innerHTML = minLength+" ~ " + maxLength + "까지 입력 가능 합니다. ";
			return false;
		}else{
			if(help!=null)
				help.innerHTML = "";
			return true;
		} */		
		return validateRegEx(new RegExp("^.{"+minLength+","+maxLength+"}$"),field.value,help,minLength+" ~ " + maxLength + "까지 입력 가능 합니다. ");
	}
	
	function validateZipcode(field,help){
		/* if(field.value.length != 5){
			if(help != null)
				help.innerHTML = "please enter exactly five digits.";
			return false;
		}else if (isNaN(field.value)){
			if(help != null)
				help.innerHTML = "please enter a number.";
			return false;
		}else{
			if(help != null){
				help.innerHTML="";
			}
			return true;
		} */
		
		/* var regext = /^\d{5}$/;
		if(!regext.test(field.value)){
			if(help != null)
				help.innerHTML = "please enter exactly five digits.";
			return false;
		}else return true; */
		
		return validateRegEx(/^\d{5}$/,field.value,help,"우편번호는 숫자  5자리 입니다.");
	}
	
	
	
	function placeOrder(form){
		 if( validateLength(form["message"],1,32,document.getElementById("message_help")) &&
		          validateZIPCode(form["zipcode"], form["zipcode_help"]) &&
		          validateNonEmpty(form["date"], form["date_help"]) &&
		          validateNonEmpty(form["name"], form["name_help"]) &&
		          validateNonEmpty(form["phone"], form["phone_help"]) &&
		          validateNonEmpty(form["email"], form["email_help"]) ){
			alert("submit");
		}else{
			alert("enter field");
		}	 	
		
	}
	
	function validateRegEx(regex,inputStr,help,helpMsg){
		if(!regex.test(inputStr)){
			if(help!=null)
				help.innerHTML = helpMsg;
			return  false;
		}else{
			if(help!=null)
				help.innerHTML = "";
			return true;
		}
	}
	
	function validateDate(input,help){
		if(! validateNonEmpty(input,help))
			return false;
		return validateRegEx(/^\d{2}-\d{2}-(\d{2}|\d{4})$/,input.value,help,"날짜 입력이 잘못 되었습니다.(mm-dd-yyyy)");
	}
	
	function validatePhone(input,help){
		if(!validateNonEmpty(input,help))
			return false;
		return validateRegEx(/^\d{3}-\d{3}-\d{4}$/,input.value,help,"전화번호를 확인하세요");
	}
	function validateEmail(input,help){
		if(!validateNonEmpty(input,help))
			return false;
		//var reg = /^.+@.+(\.\w{2,4})+$/;
		var reg = /^[\w\._\+]+@[\w_]+(\.\w{2,4})+$/;
		return validateRegEx(reg,input.value,help,"이메일을  확인하세요");
	}
</script>
</head>
<body>
<form name="form1" method="post" action="a.jsp">
	<div class="heading">
		<img src="../images/logo.png" id="logo" />
	</div>
	<div class="field">
		Enter the banner message:
		<input type="text" name="message" id="message" size="32" onblur="validateLength(this,2,32,document.getElementById('message_help'))">
		<span id="message_help" class="help"></span>
	</div>
	<div class="field">
		Enter Zip code of the location:
		<input type="text" name="zipcode" id="zipcode" size="5" onblur="validateZipcode(this,document.getElementById('zipcode_help'))">
		<span id="zipcode_help" class="help"></span>
	</div>
	<div class="field">
        Enter the date for the message to be shown:
        <input id="date" name="date" type="text" size="10" onblur="validateDate(this,document.getElementById('date_help'))"/>
        <span id="date_help" class="help"></span>
      </div>
      <div class="field">
        Enter your name:
        <input id="name" name="name" type="text" size="32" onblur="validateNonEmpty(this,document.getElementById('name_help'))" />
        <span id="name_help" class="help"></span>
      </div>
      <div class="field">
        Enter your phone number:
        <input id="phone" name="phone" type="text" size="12" onblur="validatePhone(this,document.getElementById('phone_help'))"/>
        <span id="phone_help" class="help"></span>
      </div>
      <div class="field">
        Enter your email address:
        <input id="email" name="email" type="text" size="32" onblur="validateEmail(this,document.getElementById('email_help'))" />
        <span id="email_help" class="help"></span>
      </div>
       <input type="button" value="Order Banner" onclick="placeOrder(this.form)" />
</form>
</body>
</html>